<template>
    <div class="com-float-menu">
        <template v-if="type==1">
            <div class="com-float-menu-item" @click="callMobile">
                <img src="/static/images/kefu-icon.png" alt="">
            </div>
            <div @click="linkShowFunc" class="com-float-menu-item">
                <img src="/static/images/weixin-icon.png" alt="">
            </div>
        </template>

        <div class="link-kefu " v-if="linkShow">
            <div class="inner plr30">
                <div>
                    <div class="close tr"><img @click="linkShow=false" src="/static/images/qiandao_close.png" alt=""></div>
                    <div class="panel">
                        <div class="top"></div>
                        <div class="bottom tc">
                            <div class="photo">
                                <img src="https://common-yystec.oss-cn-hangzhou.aliyuncs.com/spxq_lxtx.png" alt="">
                                <div class="fs-18 c-020202 pt20">联系客服</div>
                                <div class="fs-13 c-a3a3a3 pt16 pb20">如果您有任何疑问或建议,可以<br>加微信联系客服咨询~</div>
                                <div class="bt-e1e1e1 c-111 fs18 ptb10" @click="copyWx">
                                    加微信
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
import otherApi from '@/api/api-other'
export default {
    data () {
        return {
            model: {
                cs_mobile: "",
                cs_wechat: ""
            },
            linkShow: false
        }
    },
    props: ["type"],
    mounted(){
        this.ListSysParam()
    },
    onShow(){
        this.ListSysParam()
    },
    onShareAppMessage( options ){
        var that = this;
        // 设置菜单中的转发按钮触发转发事件时的转发内容
        var shareObj = {
            title: "专利",// 默认是小程序的名称(可以写slogan等)
            // path: '/pages/project/detail',// 默认是当前页面，必须是以‘/’开头的完整路径
            imageUrl: '',//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
            success: function(res){
                if(res.errMsg == 'shareAppMessage:ok'){
                    wx.showToast({
                        title: "分享成功",
                        icon: "success",
                        duration: 2000
                    })
                }
            },
            fail: function() {
                // 转发失败之后的回调
                if(res.errMsg == 'shareAppMessage:fail cancel'){
                    // 用户取消转发
                
                }else if(res.errMsg == 'shareAppMessage:fail'){
                    // 转发失败，其中 detail message 为详细失败信息
                    wx.showToast({
                        title: "分享失败",
                        duration: 2000
                    })
                }
            },
            complete: function () {
                
            }
        };
        // 来自页面内的按钮的转发
        if( options.from == 'button' ){
           
        }
        // 返回shareObj
        return shareObj;
    },
    methods: {
        ListSysParam(){
            otherApi.ListSysParam({}).then(data => {
                this.model = data.result
            })
        },
        callMobile(){
            wx.makePhoneCall({
                phoneNumber: this.model.cs_mobile
            })
        },
        linkShowFunc(){
            this.linkShow = true
        },
        copyWx(){
            this.linkShow = false
            wx.setClipboardData({
                //准备复制的数据
                data: this.model.cs_wechat,
                success: function (res) {
                    wx.showToast({
                        title: '已复制微信号，请添加好友',
                        icon: 'none',
                        duration: 2000
                    })
                }
            });
        }
    }
}
</script>

<style lang="scss">
.com-float-menu {
    position: fixed;
    z-index: 2;
    bottom: 50px;
    right: 20px;
    .com-float-menu-item{
        position: relative;
        margin-bottom: 10px;
        button{
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        img{
            width: 37px;
            height: 37px;
        }
    }
    .link-kefu{
        position: fixed;
        z-index: 5;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba( #000000, .5);

        .inner{
            top: 50%;
            position: absolute;
            transform: translateY(-50%);
            width: 100%;
            >div{
                .close{
                    img{
                        width: 30px;
                        height: 30px;
                    }
                }
                .panel{
                    border-radius: 5px;
                    overflow: hidden;
                    .top{
                        height: 100px;
                        background-color: #ff4141;
                    }
                    .bottom{
                        background-color: #fff;
                        height: 200px;
                        .photo{
                            position: relative;
                            top: -50px;
                            img{
                                width: 90px;
                                height: 90px;
                                border-radius: 50%;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
